<template>
    <div>
      <!-- 导航栏 -->
      <nav>
        <ul>
          <li v-if="!userLoggedIn"><router-link to="/login">登录</router-link></li>
          <li><router-link to="/transaction">交易列表</router-link></li>
          <li><router-link to="/budgets">预算列表</router-link></li>
          <li><button class="logout-button" @click="handleLogout">退出登录</button></li>
        </ul>
      </nav>
    </div>
  </template>

<script>
export default {
  props: ['userLoggedIn', 'username'],
  methods: {
    handleLogout () {
      // 用户退出登录时触发事件通知父组件
      this.$emit('logout')
    }
  }
}
</script>

  <style scoped>
  /* 样式可以根据您的设计进行调整 */
  .container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
  }

  nav {
    background-color: #4caf50;
    color: white;
    padding: 10px;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  ul li {
    display: inline;
    margin-right: 20px;
  }

  button {
    margin-top: 10px;
  }
    .user-info {
    margin-top: 20px;
  }

  .welcome-message {
    font-size: 18px;
    font-weight: bold;
  }

  .logout-button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
  }

  .logout-button:hover {
    background-color: #d32f2f;
  }
  </style>
